<template>
    <div v-if="timelineStyle === 1" class="rn-timeline-wrapper timeline-style-one position-relative">
        <div class="timeline-line"/>

        <div class="single-timeline mt--40"
             v-for="(timeline, index) in timelineData"
             :key="index">
            <div class="timeline-dot">
                <div class="time-line-circle"/>
            </div>
            <div class="single-content">
                <div class="inner">
                    <div class="row row--30 align-items-center">

                        <span class="date-of-timeline" data-aos="fade-up" data-aos-delay="50">
                                    {{ timeline.date }}
                                </span>
                                <h4 class="title" data-aos="fade-up" data-aos-delay="80">
                                    {{ timeline.title }}
                                </h4>
                                <p class="description" data-aos="fade-up" data-aos-delay="110" v-html="timeline.description">

                                </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div v-else-if="timelineStyle === 2 || timelineStyle === 3 || timelineStyle === 4"
         class="timeline-style-two bg-color-blackest">
        <div class="row row--0">
            <div :class="`col-lg-2 col-md-2 rn-timeline-single ${checkTimelineStyle}`"
                 v-for="(timeline, index) in timelineData"
                 :key="index">
                <div class="rn-timeline">
                    <h6 class="title" data-aos="fade-up" data-aos-delay="60">
                        {{ timeline.title }}
                    </h6>
                    <div class="progress-line">
                        <div class="line-inner"/>
                    </div>
                    <div class="progress-dot">
                        <div class="dot-level">
                            <div class="dot-inner"/>
                        </div>
                    </div>
                    <p class="description" data-aos="fade-up" data-aos-delay="60">
                        {{ timeline.description }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Timeline',
        props: {
            timelineData: {},
            timelineStyle: {
                type: Number,
                default: 1
            }
        },
        computed: {
            checkTimelineStyle() {
                if (this.timelineStyle === 3) return 'no-gradient';
                else if (this.timelineStyle === 4) return 'dark-line';
                else return '';
            }
        }
    }
</script>